<template>
	<view class="">
			<!-- 已经登录 -->
		<template v-if="islogin&&user">
			<view @tap="gouserinfo" class="user-info  u-f">
				<view class="user-info-img">
					<image :src="user.userimg" mode="widthFix" lazy-load></image>
				</view>
				<view class="user-info-center u-f-jsb">
					<view class="user-info-name">
						{{user.username}}
					</view>
					<view class="user-info-center-bottom">
						总访客 {{user.count}} 今日 {{user.todaycount}}
					</view>
				</view>
				<view class="user-info-more">
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
		</template>
	
	
		<!-- 未登录 -->
		<template v-else>			
			<view class="user-info">
				<view class="u-f-ajc">
					登录糗事百科，体验更多功能
				</view>
				<view class="user-icon u-f u-f-jsb">
					
						<u-icon name="weixin-circle-fill" color="#2AD19B" size="100"></u-icon>
						<u-icon name="weibo-circle-fill" color="  #EE5E5E" size="100"></u-icon>
						<u-icon name="qq-circle-fill" color="#5280CE" size="100"></u-icon>
							
				</view>
				<view class="u-f-ajc" @tap="gologin">
					账号密码登录 <view style="color: #ABABAB;">></view>
				</view>
			</view>
		</template>	
	</view>
</template>

<script>
	export default{
		props:{
			islogin:Boolean,
			user:Object
		},
		methods:{
			gologin(){
				uni.navigateTo({
					url:'../../pages/login/login'
				})
			},
			gouserinfo(){
			uni.navigateTo({
				url:'../../pages/user/user'
			})	
			}
		}
	}
</script>

<style scoped>
	/* 未登录 */
	.user-icon{
		
		margin: 30upx 150upx;
	}
	/* 第一行样式 */
	.user-info-img image{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.user-info-center{
		margin-left: 20upx;
		font-size: 40upx;
	}
	.user-info-center-bottom{
		font-size: 23upx;
		color: #B3B3B3;
	}
	.user-info-more{
		position: fixed;
		right: 20upx;
		margin-top: 25upx;
	}
</style>
